<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col>
        <el-button type="primary" @click="clickCreat">
          添加优秀专利汇总
        </el-button>
        <el-button
          type="success"
          style="width: 100px"
          @click="excellentImport = true"
        >
          导入
        </el-button>
      </el-col>
      <el-col>
        <div style="display: flex; justify-content: flex-end">
          <div>
            <el-select 
                placeholder="领域"
                clearable
                @clear="searchVal"
                v-model="form.realm"
                @change="handelChange"
            >
              <el-option 
              v-for="item in fieldList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <el-input
            v-model="form.search"
            clearable
            style="width: 300px; margin-left: 15px"
            placeholder="搜索专利号"
            class="input-with-select"
            @clear="clear"
          >
            <el-button
              slot="append"
              style="
                background-color: #45a321;
                color: #fff;
                border-radius: 0;
                border: 1px solid #45a321;
              "
              @click="searchVal"
            >
              搜索
            </el-button>
            <i slot="prefix-icon" class="el-icon-search" />
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-table
      align="center"
      :data="list.list"
      border
      style="width: 100%; margin: 20px 0"
    >
      <el-table-column align="center" prop="pno" label="专利号" />
      <el-table-column align="center" prop="realm" label="领域" />
      <el-table-column align="center" prop="school" label="院校" />
      <el-table-column align="center" prop="team" label="团队" />
      <el-table-column align="center" prop="myorder" label="排序" />
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            class="editText"
            type="text"
            @click="clickEdit(scope.row.id)"
          >
            修改
          </el-button>
          <el-button
            class="deletText"
            type="text"
            @click="deletUser(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        :current-page="list.page"
        :page-size="list.size"
        layout="total, prev, pager, next, jumper"
        :total="parseInt(list.count)"
        align="left"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      title="优秀专利汇总"
      :visible.sync="dialogVisible"
      width="50%"
      top="10.8vh"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div class="mini">
        <el-form ref="formData" :model="formData" label-width="40px">
          <div class="s_flex s_align_items news_mrt" style="margin-bottom: 0px">
            <div class="s_flex s_align_items" style="width: 50%">
              <el-form-item label="领域">
                <!-- <p style="width: 30%">领域</p> -->
                <!-- <div class=""> -->
                <el-select
                  v-model="form.realm"
                  placeholder="请选择"
                  :clearable="false"
                  style="margin-left: 97px"
                >
                  <el-option
                    v-for="item in fieldList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                  <!-- this.$refs.ruleForm.resetFields() -->
                </el-select>
                <!-- </div> -->
              </el-form-item>
            </div>
            <div class="s_flex s_align_items" style="width: 50%">
              <p style="width: 30%">院校</p>
              <div class="">
                <el-select v-model="form.school" placeholder="请选择">
                  <el-option
                    v-for="item in collegeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </div>
            </div>
          </div>
          <div class="s_flex s_align_items news_mrt">
            <p style="width: 15%">团队</p>
            <div class="left_w">
              <el-select v-model="form.team" placeholder="请选择">
                <el-option
                  v-for="item in teamsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>
          </div>
          <div class="s_flex s_align_items news_mrt">
            <p style="width: 15%">排序</p>
            <div class="left_w">
              <el-input v-model="form.myorder" placeholder="请输入内容" />
            </div>
          </div>
          <div class="s_flex s_align_items news_mrt">
            <p style="width: 15%">专利号</p>
            <div class="left_w">
              <el-input v-model="form.pno" placeholder="请输入内容" />
            </div>
          </div>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="excellentImport"
      width="25%"
      :destroy-on-close="true"
    >
      <div>
        <div>
          <div style="margin-bottom: 30px">
            <div class="sq_tilte4 sq_tilte_color" style="margin-bottom: 20px">
              1.请先下载导入模块
            </div>
            <!-- <download-excel
              :data="json_data"
              :fields="json_fields"
              name="优秀专利汇总模板.xls"
            > -->
            <el-button type="primary" style="padding: 8px 20px">
              <a :href="`${VUE_APP_BASE_API}/office/excellent_patent.xlsx`"
                >下载模板</a
              >
            </el-button>
            <!-- </download-excel> -->
          </div>
          <div style="margin-bottom: 30px">
            <div class="sq_tilte4 sq_tilte_color" style="margin-bottom: 20px">
              2.请上传填写好的模块
            </div>
            <el-upload
              class="upload-demo"
              action
              :on-change="handleChange"
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :file-list="fileListUpload"
              :limit="limitUpload"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
              :auto-upload="false"
            >
              <el-button type="primary" style="padding: 7px 34px">
                上传
              </el-button>
            </el-upload>
          </div>
        </div>
        <div>
          <el-button
            class="pubBtn"
            style="width: 100%; margin: 40px 0; height: 44px"
            type="button"
            @click="enterExe"
          >
            导入
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { VUE_APP_BASE_API } from "@/config.js";
import {
  patentList,
  patentAdd,
  patentEdit,
  patentDel,
  patentInfo,
  getTeams,
  getLabel,
  getExampleExcel,
  importExcel,
  upload,
} from "@/api/adminWeb";

import Editor from "@/components/Editor";
export default {
  data() {
    return {
      excelData: [],
      fileListUpload: "",
      dataList: [{}],
      limitUpload: 1,
      VUE_APP_BASE_API,
      list: [],
      dialogVisible: false,
      excellentImport: false,
      form: {
        excellent_patent_id: "",
        search: "",
        realm: "",
        school: "",
        myorder: "",
        team: "",
        pno: "",
      },
      patent_list: [
        {
          name: "",
        },
      ],
      FormArr: 1,
      contentDesc: "",
      clearDesc: 0,
      fileTemp: "",
      fileList: [],
      options: [],
      teamsList: [],
      fieldList: [],
      collegeList: [],
    };
  },
  mounted() {
    // console.log("getExampleExcel", getExampleExcel);
    this.getLIst();
    this.getTeams();
    this.labelList();
  },
  methods: {
    handelChange(){
      this.getLIst()
    },
    enterExe() {
      // console.log(this.fileTemp);
      if (!this.fileTemp) {
        this.$message({
          type: "warning",
          message: "请先选择文件",
        });
        return;
      }
      this.importfxx(this.fileTemp);
      this.$message.success("导入成功");
      this.excellentImport = false;
      this.clearDesc = 1;
      setTimeout(() => {
        this.getLIst();
      }, 500);
    },
    handleChange(file, fileList) {
      this.fileTemp = file.raw;
      if (this.fileTemp) {
        // console.log(this.fileTemp.type)
        if (
          this.fileTemp.type ==
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
          this.fileTemp.type == "application/vnd.ms-excel"
        ) {
          // this.importfxx(this.fileTemp);
        } else {
          this.$message({
            type: "warning",
            message: "附件格式错误，请删除后重新上传!",
          });
        }
      }
    },
    importfxx(obj) {
      // let file = obj.blob() //数据流
      let formdata = new FormData();
      formdata.set("file", obj);
      upload(formdata, {
        "Content-Type": "multipart/form-data",
      })
        .then((res) => {
          importExcel({ file: res.url });
        })
        .catch((err) => {});
      //if (!FileReader.prototype.readAsBinaryString) {
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList) {
      // console.log(file)
      this.fileTemp = null;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择1个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    deleteItem(index) {
      this.FormArr--;
      this.patent_list.splice(index, 1);
    },
    async labelList() {
      this.fieldList = await getLabel({ type: 1 });
      this.collegeList = await getLabel({ type: 2 });
    },
    async getTeams() {
      this.teamsList = await getTeams();
    },
    searchVal() {
      this.getLIst();
    },
    clickCreat() {
      this.dialogVisible = true;
    },
    async clickEdit(id) {
      try {
        let i = [];
        this.form = await patentInfo({
          excellent_patent_id: id,
        });
        // this.patent_list.map((item, b) => {
        //   this.patent_list.map((a, c) => {
        //     if (b == c && item) {
        //       this.patent_list[c].name = item;
        //     }
        //   });
        //   if (item) {
        //     i.push(b);
        //   }
        // });
        // // this.FormArr = i.length;
        // console.log(this.FormArr);
        this.contentDesc = this.form.content;
        this.dialogVisible = true;
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    deletUser(id) {
      this.$confirm("此操作将删除该工程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await patentDel({
              excellent_patent_id: id,
            });
            this.getLIst();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } catch (error) {
            this.$message.error(error.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    clear() {
      this.getLIst();
    },
    handleClose() {
      this.clearDesc = 1;
      this.dialogVisible = false;
      this.form = {};
    },
    async onSuccess(response, file, fileList) {
      if (response) {
        // console.log(response.data.url);
        this.form.tpic = response.data.url;
        this.$nextTick(() => {
          this.form.tpic = response.data.url;
        });
        this.$message.success("上传成功");
      }
    },
    async getLIst(page = 1) {
      try {
        this.list = await patentList({
          realm: this.form.realm,
          keyword: this.form.search,
          page,
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    descVal(val) {
      this.form.content = val;
    },
    project(val) {
      this.form.project = val;
      // console.log(val);
    },
    async save() {
      try {
        const { realm, school, myorder, team, pno } = this.form;
        if (this.form.id) {
          await patentEdit({
            excellent_patent_id: this.form.id,
            realm,
            school,
            myorder,
            team,
            pno,
          });
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.clearDesc = 1;
        } else {
          await patentAdd({
            realm,
            school,
            myorder,
            team,
            pno,
          });
          this.clearDesc = 1;
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
          // this.$refs.ruleForm.resetFields();
          this.form = {};
        }
      } catch (error) {}
    },
    cancle() {
      this.dialogVisible = false;
      this.clearDesc = 1;
      this.form = {};
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const resUser = await patentList({
          keywords: this.form.search,
          page: size,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        this.getLIst(currentPage);
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    changeInput(index) {
      this.patent_list[index].message = "";
    },
    addItem(index) {
      if (this.patent_list[index].name == "") {
        this.$message.error("请填写专利申请号");
      } else {
        this.FormArr++;
        this.patent_list.push({
          name: "",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.mini {
  height: 69.5vh;
}
.news_mrt {
  margin-bottom: 30px;
}
.left_w {
  width: 80%;
}
</style>